<template>
    <view class="order">
        <view>
            <u-tabs
                ref="uTabs"
                :list="list"
                :current="current"
                active-color="#057748"
                bg-color="#f6f6f6"
                @change="tabsChange"
                :is-scroll="true"
            ></u-tabs>
        </view>

        <!-- 监听滚动到底部事件 -->
        <scroll-view
            scroll-y
            style="width: 100%"
            @scrolltolower="onreachBottom"
        >
            <view
                class="content card"
                v-for="(i, index) in orderList"
                :key="index"
            >
                <view class="top">
                    <view class="left" @click="goShop(i.shop_id)">
                        <image
                            class="icon_sj"
                            :src="BaseUrl + '/static/common/cen7.png'"
                            mode="scaleToFill"
                        />
                        <text class="mendian">{{ i.shop.shopname }}</text>
                        <image
                            class="icon_arrow"
                            :src="BaseUrl + '/static/wImg/arrowRig.png'"
                            mode="scaleToFill"
                        />
                    </view>
                    <view
                        class="right"
                        :style="{
                            color:
                                i.state == 4 || i.state == 7
                                    ? '#999'
                                    : '#057748',
                        }"
                    >
                        <text>{{ setStatus(i.state) }}</text>
                    </view>
                </view>
                <view class="center" v-for="item in i.goods" :key="item.id">
                    <image
                        :src="BaseUrl + item.image"
                        style="border-radius: 30rpx"
                        mode=" scaleToFill"
                    />
                    <view
                        class="center-info"
                        @click="goOrder(i.state, i.id, item.type)"
                    >
                        <view
                            style="padding-right: 20rpx; box-sizing: border-box"
                        >
                            <view class="title line-clamp-2">{{
                                item.title
                            }}</view>
                            <view class="sub">{{ item.difference }}</view>
                        </view>
                        <view style="text-align: right">
                            <!-- <view class="price">¥{{ i.pay.price }}</view> -->
                            <view class="price">¥{{ item.price }}</view>
                            <view class="num">x{{ item.number }}</view>
                            <view class="total" style="color: #ff6a0c">{{
                                filet(item.refund_status)
                            }}</view>
                        </view>
                    </view>
                </view>
                <view class="bottom">
                    <view class="btns">
                        <view
                            class="btns"
                            @click="goOrder(i.state, i.id, i.goods[0].type)"
                        >
                            <view class="btn_success btn" v-if="i.state == 1"
                                >去支付</view
                            >
                            <view
                                class="btn_success btn"
                                v-if="
                                    i.state == 1 && i.goods[0].type == 'normal'
                                "
                                @click.stop="cancel(i.id)"
                                >取消订单</view
                            >
                        </view>
                        <view
                            class="btn_success btn"
                            @click.stop="
                                goOrder(i.state, i.id, i.goods[0].type)
                            "
                            v-if="i.state == 3 && i.goods[0].type == ''"
                            >去核销</view
                        >
                        <view
                            class="btn_success btn"
                            @click.stop="
                                goOrder(i.state, i.id, i.goods[0].type)
                            "
                            v-if="i.state == 3 && i.goods[0].type == 'normal'"
                        >
                            待收货
                        </view>
                    </view>
                    <view class="btns" @click.stop="goComment(i.id)">
                        <view class="btn_success btn" v-if="i.state == 4"
                            >去评价</view
                        >
                    </view>
                    <view class="btns" @click="goDetail(i)">
                        <view
                            class="btn_success btn"
                            v-if="[2, 3, 4, 6, 7].includes(i.state)"
                            >再来一单</view
                        >
                    </view>
                </view>
            </view>
            <u-empty
                text="暂无数据"
                v-if="orderList.length == 0"
                mode="list"
            ></u-empty>
        </scroll-view>
        <u-loadmore :status="status" />
    </view>
</template>
<script>
import { BaseUrl } from "../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl: BaseUrl,
            current: 0,
            status: "loadmore",
            list: [
                {
                    name: "全部",
                },
                {
                    name: "待支付",
                },
                {
                    name: "待发货",
                },
                {
                    name: "待核销/收货",
                },

                {
                    name: "待评价",
                },
                {
                    name: "已取消",
                },
                {
                    name: "已完成",
                },
                {
                    name: "退款/售后",
                },
            ],
            orderList: [],
            page: 1,
        };
    },
    onLoad(options) {
        if (options.id == 4) {
            this.current = 6;
        } else this.current = options.id;
    },
    onShow() {
        this.page = 1;
        this.orderList = [];
        this.getList();
    },
    // 触底加载
    onReachBottom() {
        if (this.status == "nomore") return;
        this.status = "loading";
        this.page++;
        this.getList();
    },
    watch: {
        current: {
            handler(val) {
                this.orderList = [];
                this.page = 1;
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        filet(i) {
            // ==1?'退款中':i.goods[0].refund_status==3?'退款成功':'退款被拒'
            if (i == 1) {
                return "退款中";
            } else if (i == 2) {
                return "待退货";
            } else if (i == 3) {
                return "退款成功";
            } else if (i == 5) {
                return "退款被拒";
            } else if (i == 4) {
                return "退款关闭";
            } else {
                return "";
            }
        },
        goDetail(i) {
            this.$request
                .get("api/wanlshop.product/goods", { id: i.goods[0].goods_id })
                .then((res) => {
                    console.log(res);
                    if ([11, 14].includes(res.data.category.pid)) {
                        console.log(1);
                        uni.navigateTo({
                            url:
                                "/dabai/pages/caterDetails/caterDetails?id=" +
                                i.goods[0].goods_id,
                        });
                    } else {
                        console.log(2);
                        uni.navigateTo({
                            url:
                                "/pages/product/goods?id=" +
                                i.goods[0].goods_id,
                        });
                    }
                });
        },
        async getList() {
            this.$util.showLoading();
            this.$request
                .get("api/wanlshop.order/getOrderList", {
                    state: this.current == 5 ? 7 : this.current,
                    page: this.page,
                })
                .then((res) => {
                    this.orderList.push(...res.data.data);
                    this.status =
                        res.data.last_page > this.page ? "loadmore" : "nomore";
                    console.log(this.status, "状态");
                    this.$util.hideAll();
                });
        },
        setStatus(status) {
            switch (status) {
                case 1:
                    return "待支付";
                case 2:
                    return "待发货";
                case 3:
                    return "待核销/收货";
                case 4:
                    return "待评价";
                case 6:
                    return "已完成";
                case 7:
                    return "已取消";
            }
        },
        //去评价
        goComment(id) {
            uni.navigateTo({
                url: "/upRelease/comment/comment?order_id=" + id,
            });
        },
        //取消订单
        cancel(id) {
            uni.showModal({
                title: "提示",
                content: "是否确认取消订单?",
                success: (res) => {
                    if (res.confirm) {
                        this.$request
                            .post("api/wanlshop.order/cancelOrder", {
                                id: id,
                            })
                            .then((res) => {
                                if (res.code == 1) {
                                    this.orderList = [];
                                    this.getList();
                                }
                            })
                            .catch((err) => {
                                uni.showToast({
                                    title: err.msg,
                                    icon: "none",
                                });
                            });
                    }
                },
            });
        },
        tabsChange(index) {
            this.current = index;
            this.getList();
        },
        changeSwiper(e) {
            this.current = e.detail.current;
            this.getList();
        },
        goOrderOperation() {
            uni.navigateTo({
                url: "/liu/pages/orderOperation",
            });
        },
        // 点击店铺
        goShop(id) {
            console.log(1);
            uni.navigateTo({
                url: "/dabai/pages/aShop/aShop?id=" + id,
            });
        }, //点击状态按钮

        goOrder(state, id, type) {
            if (type != "normal") {
                uni.navigateTo({
                    url:
                        "/liu/pages/orderOperation?id=" +
                        id +
                        "&state=" +
                        state,
                });
                return;
            } else {
                uni.navigateTo({
                    url:
                        "/yCreate/pages/orderDetail?state=" +
                        state +
                        "&id=" +
                        id,
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
swiper {
    height: calc(100vh - 80rpx);
}

.swiper-item {
    overflow: auto;
}

.card {
    margin: 20rpx;
    padding: 20rpx 14rpx;
    background-color: #fff;
    border-radius: 16rpx;
}

.content {
    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20rpx;

        .left {
            display: flex;
            align-items: center;

            .mendian {
                font-size: 28rpx;
                font-weight: bold;
            }

            .icon_sj {
                width: 40rpx;
                height: 40rpx;
                margin-right: 10rpx;
            }

            .icon_arrow {
                width: 14rpx;
                height: 24rpx;
                margin-left: 10rpx;
                opacity: 0.5;
            }
        }
    }

    .center {
        display: flex;
        justify-content: space-around;
        padding: 20rpx 0;

        image {
            width: 180rpx;
            height: 180rpx;
        }

        .center-info {
            display: flex;

            .title {
                font-size: 32rpx;
                line-height: 1.4em;
                width: 43vw;
                margin-left: 20rpx;
            }

            .sub {
                font-size: 26rpx;
                opacity: 0.5;
                margin-top: 20rpx;
                margin-left: 20rpx;
            }

            .price {
                font-size: 32rpx;
                font-weight: bold;
                line-height: 1.4em;
            }

            .num {
                font-size: 26rpx;
                opacity: 0.5;
                margin-top: 20rpx;
                text-align: right;
            }
        }
    }

    .bottom {
        display: flex;
        justify-content: flex-end;
        .btns {
            display: flex;
            justify-content: flex-end;

            .btn {
                font-size: 30rpx;
                padding: 10rpx 30rpx;
                margin: 0 10rpx;
            }

            .btn_default {
                border-radius: 40rpx;
                color: #888888;
                border: 1px solid #ededed;
            }

            .btn_success {
                border-radius: 40rpx;
                color: #057748;
                border: 1px solid #3d654b;
            }
        }
    }
}
.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.order {
    padding-bottom: env(safe-area-inset-bottom);
}
</style>
